<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>演示：支持移动设备的纯Javascript画廊</title>
<meta name="keywords" content="javascript,图片画廊" />
<meta name="description" content="Helloweba文章结合实例演示HTML5、CSS3、jquery、PHP等WEB技术应用。" />

<!--必要样式-->
<link rel="stylesheet" href="css/photoswipe.css"> 
<link rel="stylesheet" href="css/default-skin/default-skin.css"> 
<style>
.pnav{margin-top:30px;text-align:center;line-height:24px; font-size:16px}
.pnav a{padding:4px}
.pnav a.cur{background:#007bc4;color:#fff;}
.demo{width:80%; margin:10px auto}

/*必要样式*/
#photos{width:150px; border:1px solid #d3d3d3;margin:20px auto; text-align:center;padding:4px;cursor:pointer;position:relative}
#photos p{position:absolute; bottom:0;left:0;padding:4px;background:#000;color:#fff}
.my-gallery {
  width: 100%;
  float: left;
}
.my-gallery img {
  width: 100%;
  height: auto;
}
.my-gallery figure {
  display: block;
  float: left;
  margin: 0 5px 5px 0;
  width: 150px;
}
.my-gallery figcaption {
  display: none;
}
</style>
<script src="js/photoswipe.min.js"></script> 
<script src="js/photoswipe-ui-default.min.js"></script> 
</head>

<body>

<div id="main">

	<p class="pnav"><a href="index.html" class="cur">图集模式</a> <a href="index2.html">列表模式</a></p>

	<div class="demo">
		<p style="font-size:16px; margin:20px auto">请点击图片观看大图</p>
	
		<div id="photos">
			<img src="images/s1_m.jpg" alt="Image description" />
			<p>图集</p>
		</div>
	
		<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
	
			<div class="pswp__bg"></div>
				<div class="pswp__scroll-wrap">
					<div class="pswp__container">
						<div class="pswp__item"></div>
						<div class="pswp__item"></div>
						<div class="pswp__item"></div>
					</div>
					<div class="pswp__ui pswp__ui--hidden">
						<div class="pswp__top-bar">
							<div class="pswp__counter"></div>
							<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
							<button class="pswp__button pswp__button--share" title="Share"></button>
							<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
							<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
							<div class="pswp__preloader">
								<div class="pswp__preloader__icn">
									<div class="pswp__preloader__cut">
										<div class="pswp__preloader__donut"></div>
									</div>
								</div>
							</div>
						</div>
						<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
							<div class="pswp__share-tooltip"></div> 
						</div>
						<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
						<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
						<div class="pswp__caption">
							<div class="pswp__caption__center"></div>
						</div>
					</div>
				</div>
			</div>
			
		</div>

</div>

<script type="text/javascript">
var openPhotoSwipe = function() {
    var pswpElement = document.querySelectorAll('.pswp')[0];

    var items = [
        {
            src: 'images/s1.jpg',
            w: 800,
            h: 1142
        },
        {
            src: 'images/s2.jpg',
            w: 800,
            h: 1142
        },
		{
            src: 'images/s3.jpg',
            w: 800,
            h: 1142
        },
		{
            src: 'images/s4.jpg',
            w: 800,
            h: 1142
        },
		{
            src: 'images/s5.jpg',
            w: 800,
            h: 1142
        }
    ];
    
    var options = {
        history: false,
        focus: false,

        showAnimationDuration: 0,
        hideAnimationDuration: 0
        
    };
    
    var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
    gallery.init();
};

document.getElementById('photos').onclick = openPhotoSwipe;
</script>

</body>
</html>